import { RbacRoleType } from '@/data/auth/role';
import { DataPermValueEnum } from '@/enums/auth';
import { StatusValueEnum } from '@/enums';
import { ProFormSelect, ProFormText, ProFormTextArea, StepsForm } from '@ant-design/pro-components';
import { Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacRoleType>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacRoleType>;
};

const UpdateModal: React.FC<UpdateFormProps> = (props) => {
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            style={{
              padding: '32px 40px 48px',
            }}
            destroyOnHidden
            title="更新"
            open={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          name: props.values.name,
          status: props.values.status,
          dataPerm: props.values.dataPerm,
          description: props.values.description,
        }}
        title="基本信息"
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '角色名称为必填项',
            },
          ]}
          width="md"
          name="name"
          label={'角色名称'}
          placeholder={'请输入角色名称'}
        />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '角色状态为必填项',
            },
          ]}
          width="md"
          name="status"
          valueEnum={StatusValueEnum}
          label={'角色状态'}
          placeholder={'请选择角色状态'}
        />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '数据权限为必填项',
            },
          ]}
          width="md"
          name="dataPerm"
          label={'数据权限'}
          valueEnum={DataPermValueEnum}
        />
        <ProFormTextArea
          rules={[
            {
              required: true,
              message: '描述为必填项',
            },
          ]}
          width="md"
          name="description"
          label={'描述'}
          placeholder={'请输入描述'}
        />
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default UpdateModal;
